<template>
    <div class="product">
      <el-button type="primary" style='margin-bottom:10px'>添加商品</el-button>
        <el-table ref="multipleTable" :border="true" :data="productData" tooltip-effect="dark" style="width: 100%">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column prop="id" label="商品编号" width="60">
            </el-table-column>
            <el-table-column prop="proName" label="商品名称" width="280">
            </el-table-column>
            <el-table-column prop="proDesc" label="商品描述">
            </el-table-column>
            <el-table-column prop="num" label="商品库存">
            </el-table-column>
            <el-table-column prop="size" label="商品尺寸">
            </el-table-column>
            <el-table-column prop="statu"  :formatter='formatter' label="是否下架">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="danger">下架</el-button>
                </template>
            </el-table-column>
        </el-table>
            <!-- 添加品牌对话框 -->
    <el-dialog title="添加商品" :visible.sync="addCategoryFormVisible">
      <el-form :model="addForm" label-width="100px" ref='addfrom'>
        <el-form-item label="产品名称">
          <el-input v-model="addForm.brandName"></el-input>
        </el-form-item>
        <el-form-item label="老价格">
          <el-select v-model="addForm.categoryId" style="width:100%" @change='changeCid'>
            <el-option :label="item.categoryName" :value="item.id" v-for="item in categoryIdList" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-upload :with-credentials='true' style="margin-left:100px" class="upload-demo" action="http://127.0.0.1:3000/category/addSecondCategoryPic" name="pic1" :on-success='uploadSuccess' :on-preview="handlePreview" :on-remove="handleRemove" list-type="picture">
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addCategoryFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addSubmit('addfrom')">确 定</el-button>
      </div>
    </el-dialog>
    </div>
</template>

<script>
import { getProductDetailList } from '@/api/index'
export default {
  data () {
    return {
      productData: []
    }
  },
  methods: {
    init () {
      getProductDetailList({page: this.page, pageSize: this.pageSize}).then(res => {
        console.log(res)
        this.productData = res.rows
      })
    },
    formatter (row) {
      if (row.statu === 1) {
        return '已上架商品'
      } else if (row.status === 0) {
        return '已下架商品'
      }
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style lang='scss' scoped>
.isRed{
    color:red
}

</style>
